<template>
  <div class="card">
    <div class="card-header" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filterFrom">
        <el-form-item>
          商品类型
          <el-select v-model="filterFrom.goods_type">
            <el-option label="全部" value=""></el-option>
            <el-option label="课程" value="1"></el-option>
            <el-option label="活动" value="2"></el-option>
            <el-option label="其它" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          订单状态
          <el-select v-model="filterFrom.status">
            <el-option label="全部订单" value=""></el-option>
            <el-option label="等待支付" value="0"></el-option>
            <el-option label="订单完成" value="1"></el-option>
            <el-option label="订单取消" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="text" @click="showDialog = true"><i class="zmdi zmdi-filter-list" />&nbsp;更多筛选</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="fetchData">确定</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="card-body card-padding">
      <el-table :data="tableData" style="width: 100%" v-loading="isLoading" border>
        <el-table-column prop="id" label="ID" width="70"></el-table-column>
        <el-table-column prop="order_number" label="订单编号" width="180"></el-table-column>
        <el-table-column prop="goods_title" label="商品名称" width="160"></el-table-column>
        <el-table-column prop="create_time" label="下单时间" width="200"></el-table-column>
        <el-table-column prop="amount" label="金额" width="100"></el-table-column>
        <el-table-column prop="uid" label="用户ID" width="160"></el-table-column>
        <el-table-column :formatter="statusFormatter" label="订单状态" width="110"></el-table-column>
        <el-table-column label="操作">
          <template scope="scope">
            <el-button size="small" type="primary" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="table-pagination">
        <div style="float: left;margin-left: 20px;">
          <el-button type="text" @click="fetchData"><i class="zmdi zmdi-refresh" />&nbsp;&nbsp;重新加载</el-button>
        </div>
        <el-pagination :current-page="filterFrom.page_number" :page-sizes="[5, 10, 15, 20]" :page-size="filterFrom.page_size" layout="sizes, prev, pager, next, jumper,total" :total="totalSize" @size-change="handleSizeChange" @current-change="handlePageChange">
        </el-pagination>
      </div>
    </div>
    <el-dialog title="更多筛选" v-model="showDialog" size="tiny">
      <el-form ref="from" :model="filterFrom" label-width="80px">
        <el-form-item label="用户ID">
          <el-input v-model="filterFrom.uid"></el-input>
        </el-form-item>
        <el-form-item label="订单号">
          <el-input v-model="filterFrom.order_number"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.stop="resetForm">重 置</el-button>
        <el-button type="primary" @click.stop="fetchData">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import API from '../../api'

  var filterFrom = {
    page_number: 1,
    page_size: 10,
    status: '0',
    goods_type: '',
    uid: '',
    order_number: ''
  }

  export default {
    data: function () {
      return {
        showDialog: false,
        isLoading: false,
        tableData: [],
        totalSize: 0,
        filterFrom
      }
    },
    created: function () {
      this.fetchData()
    },
    methods: {
      handleSizeChange: function (val) {
        this.filterFrom.page_size = val
        this.fetchData()
      },
      handlePageChange: function (val) {
        this.filterFrom.page_number = val
        this.fetchData()
      },
      handleDelete: function (SelectData) {
        this.$confirm('你将删除该订单, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteData(SelectData.id)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },

      fetchData: function () {
        this.isLoading = true
        this.showDialog = false
        API.orderList(this.filterFrom,
          (data) => {
            this.isLoading = false
            if (!data) return
            this.tableData = data.list
            this.totalSize = data.total_size
          }
        )
      },

      resetForm: function () {
        this.filterFrom.uid = ''
        this.filterFrom.course_id = ''
      },
      deleteData: function (id) {
        var par = {
          id: id,
          type: 1
        }
        API.orderDelete(par, (data) => {
          if (data) {
            this.fetchData()
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          }
        })
      },
      statusFormatter: function (row) {
        switch (row.status) {
          case 0: return '等待支付'
          case 1: return '订单完成'
          case 2: return '订单取消'
          default: return ''
        }
      }
    }
  }

</script>

<style>
  .table-pagination {
    text-align: right;
    padding: 10px 0px;
    background: #eef1f6;
    border: 1px solid #dfe6ec;
    border-top: none
  }

</style>
